$(function () {
    $('.wave').append('<div class="dot" style="top:50%;left:50%;"></div>')
        setInterval(function () {
            $('.wave').append('<div class="dot" style="top:50%;left:50%;"></div>')
        },1100);


    $('.nav_pro').find('li').on('click', function () {
        var $liId = $(this).attr('id');
        var $txtClassName = '.J_' + $liId;
        $($txtClassName).css('display', 'block').siblings('section').css('display', 'none');
        $(this).siblings('li').find('img').addClass('rotate5');
        $(this).siblings('li').find('span').css('opacity', '1').addClass('nav_icon_light');
        $(this).find('img').removeClass('rotate5');
        $(this).find('span.nav_icon_light').css('opacity', '0.8').removeClass('nav_icon_light')
    });
    var objArr=[];
    var objArr2=[];
    function DD(){
        this.w=Math.round(50*(0.5+Math.random()));
        this.h=this.w;
        this.x=x(this.w);
        this.y=y(this.x,this.h);
        this.initX=absX(this.x);
        this.initY=absY(this.y);
        this.angle=angle({x:this.x,y:this.y},{x:300,y:300});
        function x(w){
            if(Math.round(Math.random())==1){
                return Math.round(Math.random()*600);//上下出的概率是1/2
            }else {
                if(Math.round(Math.random())==1){
                    return 600+w
                }else {
                    return 0-w
                }
            }
        }
        function y(x,h){
            if(x<0||x>600){
                return Math.round(Math.random()*600)
            }else {
                if(Math.round(Math.random())==1){
                    return 600+h
                }else {
                    return 0-h
                }
            }
        }
        function absX(x){
         return   Math.abs(300-Math.abs(x))
        }
        function absY(y){
            return   Math.abs(300-Math.abs(y))
        }
        function angle(start,end){

            var diff_x = end.x - start.x,
                diff_y = end.y - start.y;
            //返回角度,不是弧度
            return 360*Math.atan(diff_y/diff_x)/(2*Math.PI);
        }
    }
    function ff(sheep) {
        setInterval(function () {
            objArr.push(new DD())
        }, sheep);
    }
    function gg(sheep){
        setInterval(function(){
            cxt.clearRect(0,0,600,600);
            $.each(objArr,function(i,n){

                if(250<n.y&& n.y<300&&250<n.x&& n.x<300){
                    objArr.splice(i,1);
                    console.log(objArr)
                }else {
                    if( n.x<300){
                        n.x= n.x+this.initX/300
                    }else if(n.x>300&& n.x<700) {
                        n.x= n.x-this.initY/300
                    }
                    if(n.y<300){
                        n.y= n.y+this.initY/300
                    }else if(n.y>300&& n.y<700) {
                        n.y= n.y-this.initY/300
                    }
                    load(n.x, n.y, n.w, n.h);
                }


            });
        },sheep)
    }
    gg(50);
    ff(1500);
    var c=document.getElementById("myCanvas");
    var cxt= c.getContext('2d');
    function load(x,y,w,h){
        var beauty = new Image();
        beauty.src = "./img/drop.png";
        beauty.onload = function(){
            cxt.drawImage(beauty,x,y,w,h);
        };

    }

    var  mechanism={
        Dosage:0,
        speed:5,
        users:50,
        speedGears:{
            fast:0,
            mid:5,
            show:10,
            soShow:50
        },
        imgSrc:[
            'img/index/navbar-bg.png',
            'img/bg_hot.png'
        ],
        dbContainer:$('.rc'),
        dbChangeUsers:function(){
            this.dbContainer.find('span.users').empty().append(Math.round((this.users)*Math.random()));
        },
        dbChange:function(){
            this.dbContainer.find('span.Dosage').empty().append(this.Dosage);
            this.dbContainer.find('span.speed').empty().append(this.speed);
            if(this.Dosage!=100){
                this.Dosage++;
                this.speed=(5 * (100-this.Dosage)/100).toFixed(2)
            }
            if(this.Dosage>50){
                this.dbChangeImg()
            }

        },
        dbChangeImg:function(){
            this.dbContainer.find('img').attr({src:this.imgSrc[1]});
        },
        mySetInterval:function(){
            setInterval(function(){

                mechanism.dbChange();
                if(mechanism.speedGears.mid==0){
                    mechanism.dbChangeUsers();
                    mechanism.speedGears.mid=5;
                }else {
                    mechanism.speedGears.mid--;
                }
            },500)
        }
    };
    mechanism.mySetInterval();




/*    $(document).ready(function () {
        $("div").each(function (index) {
            $(this).css("transform", "rotate(" + (index*10) + "deg)");

        })
    })*/

});
var time,
    $clickNum = 0;
function lieach1(num, thisobj) {
    $(thisobj).attr('disabled', 'disabled').removeClass('shineAction').addClass('disabledClass');
    $lists = $('.scene1_right').find('div.J_hlight_area');
    $txt_lists = $('section.optStep').find('li');
    if ($clickNum != 0 && num == 0) {
        $lists.css('opacity', '0');
        $txt_lists.css('opacity', '0');
        clearTimeout(time)
    }
    forLieach(num, thisobj, $lists, $txt_lists, time)
}
function lieach2(num, thisobj) {
    $(thisobj).attr('disabled', 'disabled').removeClass('shineAction').addClass('disabledClass');
    $lists = $('.scene2_right').find('.J_hlight_area');
    $txt_lists = $('section.optStep').find('li');
    if ($clickNum != 0 && num == 0) {
        $lists.css('opacity', '0');
        $txt_lists.css('opacity', '0');
        clearTimeout(time)
    }
    forLieach(num, thisobj, $lists, $txt_lists, time)
}
function forLieach(num, thisobj, $lists, $txt_lists, time) {
    var $index = num;
    var divlistlenght = $txt_lists.length;
    var obj = $lists[$index];
    var txt_obj = $txt_lists[$index];
    var $count = num + 1;
    var $className = 'bounce' + $count;
    var $txt_className = 'txt_bounce' + $count;
    $(txt_obj).addClass($txt_className);
    var $times = $count * 1000 + 1000;
    var $times2 = $count * 1000 + 200;
    time = setTimeout(function () {
        $(txt_obj).removeClass($txt_className).css('opacity', '1')
    }, $times);
    time = setTimeout(function () {
        $(obj).css('opacity', '1')
    }, $times2);
    if (++$index <= divlistlenght - 1) {
        forLieach($index, thisobj, $lists, $txt_lists, time)
    } else {
        time = setTimeout(function () {
            $(thisobj).removeAttr('disabled').removeClass('disabledClass').addClass('shineAction')
        }, $times)
    }
    $clickNum++
};

